<template>
  <view>
    <!-- Search Bar -->
    <view class="search-bar">
      <input class="search-input" type="text" placeholder="请输入关键词" />
      <button class="search-btn" @click="onSearch2">搜索</button>
    </view>

    <!-- Historical Search Tags -->
    <view class="history-section">
      <view class="history-title">历史搜索</view>
      <view class="tags">
        <view class="tag">厨房防水补漏</view>
        <view class="tag">卫生间防水补漏</view>
        <view class="tag">其他补漏</view>
        <view class="tag">堵楼安</view>
        <view class="tag">屋顶补漏</view>
      </view>
    </view>

    <!-- Popular Searches -->
    <view class="hot-section">
      <view class="hot-title">
        <text class="hot-icon">🔥</text> 当季热搜
      </view>
      <view class="hot-list">
        <view class="hot-item"><text class="rank">1</text> 阳台漏水修补</view>
        <view class="hot-item"><text class="rank">2</text> 堵墙皮</view>
        <view class="hot-item"><text class="rank">3</text> 马桶疏通</view>
        <view class="hot-item"><text class="rank">4</text> 打眼安装</view>
        <view class="hot-item"><text class="rank">5</text> 修补墙皮</view>
        <view class="hot-item"><text class="rank">6</text> 马桶维修</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // Any dynamic data or methods can go here
    };
  },
};
</script>

<style scoped>
/* Search Bar */
.search-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: gray;
}

.search-input {
  flex: 1;
  height: 40px;
  padding: 0 10px;
  border: none;
  border-radius: 20px;
  background-color: white;
}

.search-btn {
  margin-left: 10px;
  padding: 0 20px;
  height: 40px;
  background-color: #4285f4;
  color: white;
  border-radius: 20px;
  border: none;
}

/* Historical Search Tags */
.history-section {
  padding: 15px;
}

.history-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 20px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

/* Hot Search Section */
.hot-section {
  padding: 15px;
}

.hot-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.hot-icon {
  color: #f44336;
}

.hot-list {
  background-color: #fafafa;
  padding: 10px;
  border-radius: 10px;
}

.hot-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
  font-size: 16px;
}

.hot-item:last-child {
  border-bottom: none;
}

.rank {
  color: #f44336;
  font-weight: bold;
  margin-right: 10px;
}
</style>
